<template>
	<view class="content">
    <view class="flex row-center" >
      <view style="width:600rpx;height:600rpx;">
        <!-- hx-lottie -->
        <hx-lottie ref="lottieWeb" :options="options" />
        
      </view>
    </view>
    
    <view class="flex" style="justify-content:space-around;padding:0 40rpx;margin-top: 80rpx;">
      <picker :range="list" range-key="name" :value="curr" @change="e=>curr=e.detail.value">
        <view class="btn">切换</view>
      </picker>
      <view class="btn" @click="$refs.lottieWeb.call('play')">开始</view>
      <view class="btn" @click="$refs.lottieWeb.call('pause')">暂停</view>
    </view>
	</view>
</template>

<script>
  import data from './index.js'
	export default {
		data() {
			return {
        // picker curr 
        curr: 0,
			}
		},
    computed:{
      // picker list
      list(){
        return data.map((item,index)=>{
          return {
            name: `动画${index+1}`,
            path: item
          }
        })
      },
      // options
      options(){
        return {
          path: this.list[this.curr].path
        }
      }
    },

	}
</script>

<style>
  .flex{
    display: flex;
  }
  .flex-col{
    display: flex;
    flex-direction: column;
  }
  .row-center{
    justify-content: center;
  }
	.btn{
    padding: 20rpx 40rpx;
    border-radius: 12rpx;
    border: 1rpx solid #aaa;
  }
</style>
